*{
	margin: 0px;
	padding:0px;
}

header{
	height: 40px;
	background-color: #333;
}

header .top{
	width:1226px;
	margin: auto;
}

header .top .left a{
	text-decoration: none;
	color:#b0b0b0;
	/* font-size字体大小 */
	font-size: 12px;
	line-height: 40px;
}

header .top .left span{
	color:#b0b0b0;
	font-size: 12px;
	line-height: 40px;
	/* margin: 0 5px; */
	padding: 0 5px;
}

header .top .left{
	/* 浮动了之后，元素都会具备行内块元素的特点 */
	float: left;
}

header .top .right{
	float:right;
}

header .top .right a{
	color:#b0b0b0;
	font-size: 12px;
	text-decoration: none;
	line-height: 40px;
}

header .top .right span{
	color:#b0b0b0;
	font-size: 12px;
	line-height: 40px;
}

.gwc{
	background-color: #424242;
	/* 变成行内块 */
	display: inline-block;
	width: 120px;
	height: 40px;
	text-align: center;
	margin-left: 30px;
	/* position定位：relative相对定位 */
	position: relative;
}

header .top a:hover{
	color:#ffffff;
}

header .right .gwc:hover{
	background-color: #fff;
	color:#ff6700 !important;
}

.msg{
	width:320px;
	height: 0px;
	/* overflow溢出 hidden隐藏 */
	overflow: hidden;
	/* 定位position：绝对定位absolute */
	position: absolute;
	top:40px;
	right:0px;
	/* shadow阴影 */
	/* r:red红色 g：green绿色 b：blue蓝色 a：0-1 */
	box-shadow: 0 0 10px rgba(0,0,0,0.2);
	transition: all 0.6s;
	background-color: #fff;
}

header .right .gwc:hover .msg{
	height: 100px;
}

section{
	width:1226px;
	height: 100px;
	margin:auto;
	/* 
		1. 溢出部分隐藏 
		2. 解决外边距塌陷问题
	*/
	overflow: hidden;
}

section .logo_box{
	width:50px;
	height: 50px;
	background-color: #ff6700;
	/* margin外边距 top:上 */
	margin-top:25px;
	/* cursor光标 */
	/* cursor: pointer; */
	float: left;
}

section .logo_box .logo{
	display: block;
}

section .logo_box .home{
	display: none;
}

section .logo_box:hover .logo{
	display: none;
}

section .logo_box:hover .home{
	display: block;
}

section .nav{
	float: left;
	margin-left: 175px;
}

section .nav ul li{
	list-style: none;
	float:left;
	line-height: 100px;
}

section .nav ul li a{
	text-decoration: none;
	padding: 0 10px;
	color:#333;
	/* font-size:文字大小 */
	font-size: 16px;
}

section .nav ul li a:hover{
	color:#FF6700;
}

section .search{
	float:right;
	line-height: 100px;
}

section .search input{
	width:265px;
	height:50px;
	/* out外面 line线 */
	outline:none;
	/* 首行缩进 */
	text-indent:10px;
}

.middle{
	width:1226px;
	height:460px;
	margin: auto;
}

.middle .left{
	width:234px;
	height:420px;
	background-color:rgba(105,101,101,0.6);
	float:left;
	padding:20px 0;
	position: relative;
}

.middle .right{
	width:992px;
	height:460px;
	background-color:lightgray;
	float:left;
}

.middle .left ul li{
	list-style: none;
	height:42px;
	line-height: 42px;
}

/* >子元素选择器 空格代表选择后代 */
.middle .left>ul>li:hover{
	background-color:#FF6700;
}

.middle .left ul li a{	
	text-decoration: none;
	color:#FFFFFF;
}

.middle .left>ul>li>a>span{
	padding-left: 30px;
	float:left;
}

.middle .left ul li a b{
	padding-right: 30px;
	float:right;
}

.middle .left .box{
	width:992px;
	height:460px;
	background-color: #fff;
	/* position定位 absolute绝对定位 */
	position: absolute;
	top:0px;
	left:234px;
	border:1px solid lightgray;
	/* box-shadow */
	/* 水平方向 垂直方向 模糊度 颜色 */
	box-shadow:2px 2px 2px rgba(0,0,0,0.2);
	/* 向内填充，border padding 就向内填充了 */
	box-sizing:border-box;
	padding: 0 20px;
	display: none;
}

.middle .left li:hover .box{
	display: block;
}

.box span{
	color:#000000;
	float:left;	
}

/* 图片和文字对齐，很麻烦 */
.box img{
	float:left;
	width: 30px;
	height: 30px;
	margin-top: 25px;
}

.box ul li{
	float: left;
	width: 237px;
	/* !important 提升优先级 */
	height: 80px !important;
	line-height: 80px !important;
}